<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div style="margin-top: 15px;">
    
      <el-input placeholder="请输入内容" v-model="input2">
        <template #prepend><i class="iconfont icon-zuo" @click="toUp()"></i></template>
        <template v-slot:append><el-button type="text" @click="Search()">搜索</el-button></template>
      </el-input>
    </div>
    <p style="margin-left: 20px;">热门搜索</p>
    <div class="sp_div" v-for="(item, index) in data" :key="index">
      <span>{{ item }}</span>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
const data=["感冒","头痛","小可爱医生","阿胶","神经病","发烧","癫痫","阿莫西林","脱发","腿抽筋"]
const input2 = ref('');
const Search = () => {
  console.log(input2.value)
  console.log('搜索')
}
//返回上一页
const toUp = () => {
  window.history.back()
  console.log('返回上一页')
}
</script>
<style scoped lang="scss">
.sp_div{
 
  span{
    text-align: center;
    line-height: 40px;
    margin-top: 5%;
    float: left;
    margin-left: 20px;
    border: 1px solid #c4c3c3;
    width: 100px;
    height: 40px;
    background-color: #efe9e9;
    border-radius: 10px 10px 10px 10px;
  }
}

</style>